<div class="form--container" mat-dialog-content>
  <form novalidate (ngSubmit)="onSubmit()" [formGroup]="formCtrl">
    <lib-form-section
      title="New Tensorboard"
      text="Create a new Tensorboard."
      i18n-title
      i18n-text
    >
    </lib-form-section>

    <!--Name / Namespace-->
    <lib-form-name-namespace-inputs
      [nameControl]="formCtrl.get('name')"
      [namespaceControl]="formCtrl.get('namespace')"
      resourceName="Tensorboard"
      [existingNames]="tensorboardNames"
    >
    </lib-form-name-namespace-inputs>

    <mat-radio-group color="primary" formControlName="storage">
      <mat-radio-button
        value="object_store"
        i18n
        data-cy-form-radio-object-store
      >
        Object Store
      </mat-radio-button>
      <mat-radio-button
        value="pvc"
        class="radio-pvc"
        i18n
        data-cy-form-radio-pvc
      >
        PVC
      </mat-radio-button>
    </mat-radio-group>

    <mat-form-field
      appearance="outline"
      class="wide"
      *ngIf="formCtrl.get('storage').value === 'pvc'"
    >
      <mat-label data-cy-form-input-pvc i18n>PVC Name</mat-label>
      <mat-select formControlName="pvcName">
        <mat-option *ngFor="let pvc of pvcNames" [value]="pvc">
          {{ pvc }}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field
      appearance="outline"
      class="wide"
      *ngIf="formCtrl.get('storage').value === 'pvc'"
    >
      <mat-label data-cy-form-input-label i18n>Mount Path</mat-label>
      <input
        formControlName="pvcMountPath"
        matInput
        placeholder="ex: mount/to/path"
        i18n-placeholder
        type="url"
      />
    </mat-form-field>

    <mat-form-field
      appearance="outline"
      class="wide"
      *ngIf="formCtrl.get('storage').value === 'object_store'"
    >
      <mat-label data-cy-form-input-label i18n>Object Store Link</mat-label>
      <input matInput formControlName="objectStoreLink" type="url" />
    </mat-form-field>

    <app-form-configurations [parentForm]="formCtrl"></app-form-configurations>

    <button
      mat-raised-button
      color="primary"
      class="form--button-margin"
      type="submit"
      [disabled]="!formCtrl.valid || blockSubmit"
      i18n
    >
      CREATE
    </button>

    <button mat-raised-button type="button" (click)="onCancel()" i18n>
      CANCEL
    </button>
  </form>
</div>
